import { NumberFormatterDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.NumberFormatter);

## Usage

Use `NumberFormatter` to format numbers. It supports the same formatting related props
as [NumberInput](/core/number-input/) component.

<Demo data={NumberFormatterDemos.usage} />

## Prefix and suffix

Set `prefix` and `suffix` props to add given string to the start or end of the value:

<Demo data={NumberFormatterDemos.prefixSuffix} />

## Thousands separator

Set `thousandSeparator` prop to separate thousands with a character. You can control
grouping logic with `thousandsGroupStyle`, it accepts: `thousand`, `lakh`, `wan`, `none` values.

<Demo data={NumberFormatterDemos.thousandsSeparator} />

## Decimal scale

`decimalScale` prop controls the number of allowed decimal places:

<Demo data={NumberFormatterDemos.decimalScale} />
